<template>
  <view class="all">
    <view class="backups">
        <u-popup :show="shipping" mode="center" >
          <shipping v-if="shipping" :boxthedata='boxthedata' @leavesite='leavesite'></shipping>
        </u-popup>
        <u-popup :show="shous" mode="center" >
            <obtain v-if="shous" :boxthedata='boxthedata' @CloseWindows='CloseWindows' @closeshow='closeshow'></obtain>
        </u-popup>
    <view v-for="value in barrage" :key="value.id">
        <view
           ref="barrageelement"
           class="absolute"
           :class="value.animationClass"
           :style="value.animatStyle"
        >{{value.content}}</view>

    </view>
    <view class="subject">
      <image src="/static/manhebox.png" alt="" />
    </view>
    <view class="bottom">
        <!-- 奖品标题 -->
      <view class="bottom_prize">
        <view class="bottom_prize_left">今日奖品</view>
          <view class="bottom_prize_info">
              <view class="bottom_prize_rule" @click="">
                  <view class="bottom_prize_rule_img">
                      <image src="https://img.ionepin.com/742317c5d8920e49c469c73ab3c468bb2009e638.png" alt="" />
                  </view>
                  <view @click="$u.route('pages_v2/blindbox/mybinbox/index')">我的盲盒</view>
              </view>
            <view class="bottom_prize_rule">
              <view class="bottom_prize_rule_img">
                  <image src="/static/yiwen.png" alt="" />
              </view>
              <view @click="$u.route('pages/article/detail', {articleKey:'blindbox'})">盲盒规则</view>
            </view>
        </view>
      </view>
      <!-- 奖品组件 -->
       <prize :goods='goods'></prize>
      <view class="bottom_box">
          <view  @click="issue">
            <image  src="/static/qipao.png" alt=""/>
          </view>
          <view @click="Smokebox">免费抽盒x{{boxTime? boxTime.number:0}}</view>
          <view @click="$u.throttle(Fortunella, 1500)">{{ blindBoxPoint }}金豆抽盒</view>
      </view>
    </view>
<!-- 发布弹幕部分 -->
    <view>
       <u-overlay :show="show">
           <view class="import-body">
            <view class="import" >
              <view class="importbox">
                <u--input
                  placeholder="发个弹幕来助力..."
                  border="surround"
                  shape="circle"
                  :customStyle="{ backgroundColor: '#f4f5f9' }"
                  clearable
                  :focus='focus'
                  v-model="value"
                  @blur="losefocus"
                ></u--input>
                 <!-- focus='true' -->
              </view>
              <view class="send" @click="btnok" >
                  <image src="/static/send.png" alt="" />
              </view>
            </view>
           </view>
	     </u-overlay>
    </view>
    <!-- 抽盒子 -->
    <u-overlay :show="boxshow" :opacity="0.9" >
          <sonComponents @unfold='unfold' @padlock='padlock' :id="mysteryId" @goaffirm='goaffirm'></sonComponents>
	  </u-overlay>
   </view>
 </view>
</template>

<script>
import {
  getbarrage, //弹幕列表
  getissuetbarrage, // 发送弹幕
  getOpeningthebox,
  getsmokebox,
} from "../../../config/api-java";
import { getboxofgoods } from "../../../config/api";
import sonComponents from "../Openbox/index.vue";
import obtain from "../components/obtain/index.vue";
import prize from "./prize/index.vue";
import shipping from "../components/shipping/index.vue";
export default {
  components: {
    sonComponents,
    obtain,
    prize,
    shipping,
  },
  data() {
    return {
      show: false, //弹幕输入框
      boxshow: false, // 抽盒子
      value: null,
      barrage: [], //弹幕列表数据
      goods: [], // 盲盒商品图片
      mysteryId: "", //盲盒id
      boxthedata: {}, //盒子打开的数据
      shous: false, // 抽到奖品的图片展示
      prize: true, // 今日奖品组件
      shipping: false, //前往地址页
      boxTime: null,
      list: {}, //弹幕的最后一位
      newestbarrage: [], // 最新弹幕
      interval: null,
        focus: false
    };
  },
  async onShow() {
    this.Smokeboxtime();
    this.barragelist();
    this.interval = setInterval(() => {
      this.barragelist();
      //this.theendId();
    }, 6000);
      this.shipping = false
  },
  computed: {
      blindBoxPoint() {
          return this.$store.getters.blindBoxPoint
      }
  },
  onHide() {
      clearInterval(this.interval)
      uni.stopPullDownRefresh()
  },
  methods: {
    // 发送弹幕
    async btnok() {
      let res = await getissuetbarrage({ content: this.value });
      //this.barragelist();
      this.value = "";
    },

    // 拿最后一位id
    async theendId() {
      let list = this.barrage.slice(-1);
      let idlist = {};
      list.forEach((item) => {
        idlist = item;
      });
      console.log("idlist", idlist);
      let res = await getbarrage({ currentId: idlist.id ? idlist.id : 0 });
      this.barrage = res;
    },

    // 弹幕列表
    async barragelist() {
      let res = await getbarrage({
        currentId: this.list.id ? this.list.id : 0,
      });
      res.forEach(info => {
          const second = this.$u.random(60, 150)/10
          const delay = this.$u.random(0, 30)/10
          info.animatStyle = {
              animationDuration: second+'s',
              animationDelay: delay
          }
          info.animationClass = 'one_'+ this.$u.random(0, 10)
          this.barrage.push(info)
      })
      //this.barrage = res
      if (res.length > 0) {
          this.list = res[res.length-1];
      }
    },
    rule() {
      uni.navigateTo({
        url: "/pages_v2/blindbox/rule/index",
      });
    },
    goaffirm(res) {
      this.boxshow = false;
      this.boxthedata = res;
      this.shipping = true;
    },
    // 封装抽盒次数
    async Smokeboxtime() {
      let goods = await getboxofgoods();
      this.boxTime = goods.boxTime;
      // console.log(117, goods);
      this.goods = goods.boxProduct;
    },
    closeshow() {
      this.shous = false;
    },
    leavesite() {
      this.shipping = false;
    },
    CloseWindows() {
      this.shous = false;
      this.shipping = true;
    },
    // 子组件取消开盒
    padlock() {
      this.boxshow = false;
    },
    // 子组件确认开盒
    unfold(res) {
      console.log(156, res);
      this.boxthedata = res;
      this.shous = true;
      this.boxshow = false;
    },
    // 金豆抽盒
    async Fortunella() {
        let res = await getsmokebox({ source: "point" });
        this.mysteryId = JSON.stringify(res);
        this.boxshow = true;
    },
    // 免费抽盒
    async Smokebox() {
      if (!this.boxTime || this.boxTime.number < 1) {
        this.$u.toast("您没有抽盒次数")
        return
      } else {
        let res = await getsmokebox({ source: "time" });
        console.log(141, res);
        this.mysteryId = JSON.stringify(res);

        this.boxshow = true;

        // 刷新免费抽盒的次数
        let goods = await getboxofgoods();
        this.boxTime = goods.boxTime;
      }
    },
    losefocus() {
      setTimeout(() => {
        this.show = false;
      }, 100);
      this.focus = false
    },
    issue() {
      this.show = true;
        setTimeout(() => {
            this.focus = true
        }, 500);
    },
      animatStyle() {
          const second = this.$u.random(60, 150)/10
          const delay = this.$u.random(0, 40)/10
          return {
              animationDuration: second+'s',
              animationDelay: delay
          }
      }
  },
  // 下拉刷新
  async onPullDownRefresh() {
    //console.log(1);
    //await this.barragelist();

    await this.Smokeboxtime();

    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss" scoped>
@keyframes animation {
  0% {
  }

  to {
    transform: translate(-1600rpx);
    display: none;
  }
}
.all {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  //padding-top: calc(var(--status-bar-height) + 10rpx);
  box-sizing: border-box;
  overflow: hidden;
  background: url("/static/box_bg.png") no-repeat center;
  background-size: 100% 100%;
  padding-top:  calc(var(--status-bar-height) + 80rpx);
  box-sizing: border-box;
}
.backups {
  position: relative;
  color: #fff;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  //margin: 80rpx auto 0 auto;
  // background-color: pink;
  .one_0 {
    // top: 68rpx;
    animation: animation 1 ease-in-out;
    top: 30rpx;
    right: -50%;
  }
  .one_1 {
    top: 80rpx;
    right: -50%;
    animation: animation 1 ease-in-out;
    //animation: animation 3.5s infinite linear;
  }
  .one_2 {
    top: 137rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 4s infinite linear;
  }
  .one_3 {
    top: 200rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 5s infinite linear;
  }
  .one_4 {
    top: 259rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 5.5s infinite linear;
  }
  .one_5 {
    top: 300rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 5.2s infinite linear;
  }
  .one_6 {
    top: 350rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 5.5s infinite linear;
  }
  .one_7 {
    top: 390rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 5.9s infinite linear;
  }
  .one_8 {
    top: 450rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 4.5s infinite linear;
  }
  .one_9 {
    top: 508rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 7.9s infinite linear;
  }
  .one_10 {
    top: 568rpx;
    right: -50%;
      animation: animation 1 ease-in-out;
    //animation: animation 8s infinite linear;
  }
  .absolute {
    position: absolute;
    height: 60rpx;
    font-size: 26rpx;
    background-color: rgba(255, 255, 255, 0.2);
    text-align: center;
    line-height: 60rpx;
    padding: 0 29rpx;
    border-radius: 30rpx;
    z-index: 1;
  }
  .subject {
    width: 583rpx;
    height: 584rpx;
    margin: 0 auto;
    // background-color: skyblue;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    position: absolute;
      bottom: 0;
    width: 750rpx;
    .bottom_prize {
      display: flex;
      height: 56rpx;
      justify-content: space-between;
      margin-bottom: 25rpx;
      // background-color: pink;
      .bottom_prize_left {
        width: 136rpx;
        height: 48rpx;
        margin-left: 30rpx;
        font-size: 34rpx;
      }
        .bottom_prize_info {
            display: flex;
        }
      .bottom_prize_rule {
        width: 174rpx;
        height: 56rpx;
        font-size: 24rpx;
          margin-right: 20rpx;
        background: url("https://img.ionepin.com/2c8d494f4afcee66394a4915227f0174c46d2a6b.png") no-repeat;
          background-size: 100% 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .bottom_prize_rule_img {
          width: 27.86rpx;
          height: 27.86rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .bottom_img {
      position: relative;
      width: 218rpx;
      height: 306rpx;
      background-color: #fff;
      overflow: hidden;
      .hide_icon {
        top: 0;
        right: 0;
        width: 72rpx;
        height: 40rpx;
        position: absolute;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .bottom_img_top {
        width: 202rpx;
        height: 202rpx;

        margin: 8rpx 8rpx 15rpx 8rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .describe {
        width: 202rpx;
        font-size: 24rpx;
        color: #000;
        text-align: center;
      }
    }
    .prizelist {
      margin-top: 25rpx;
      display: flex;
      .frame {
        border: 1rpx solid #2878ff;
      }
    }
    .prizelist view:nth-child(2) {
      margin: 0rpx 18rpx;
    }
    .prizelist view:nth-child(4) {
      margin-left: 18rpx;
    }
  }
  .bottom_box {
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
    margin: 49rpx 0 51rpx 0;
  }
  .bottom_box view:nth-child(1) {
    width: 90rpx;
    height: 88rpx;
    //sborder: 1rpx solid #fff;
    background-image: linear-gradient(#040304, #4e3c65);
    image {
      width: 100%;
      height: 100%;
    }
  }
  .bottom_box view:nth-child(2) {
    width: 278rpx;
    height: 88rpx;
    //border: 1rpx solid #fff;
    background: url("../../../static/icon_box_btn.png") no-repeat;
    background-size: 100% 100%;
  }
  .bottom_box view:nth-child(3) {
    width: 276rpx;
    height: 86rpx;
    //border: 1rpx solid #fff;
    background: url("../../../static/icon_box_btn.png") no-repeat;
    background-size: 100% 100%;
  }
}

.import-body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
}
.import {
  //position: fixed;
  //bottom: 0rpx;
  width: 100%;
  height: 98rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .importbox {
    width: 600rpx;
    height: 70rpx;
  }
  .send {
    width: 70rpx;
    height: 70rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.alter {
  margin-top: 724rpx;
}
</style>



